<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content" v-if="identity!=2&&identity!=6&&identity!=4">
				<view class="change-box flexWrapNo" :style="{top:customHeight.top+'px',height:customHeight.height+'px'}"
					@tap="goPage('/pages/index/myStore')">
					切换门店
					<image src="../../static/index/change-icon.png" class="change-icon"></image>
				</view>
				<view class="shop-box" :style="{paddingTop:navHeight+'px'}">
					<swiper class="banner-box" :autoplay="true" :interval="3000" :duration="1000" circular
						indicator-dots>
						<swiper-item class="banner-item" v-for="(item, index) in bannerList" :key="index"
							@tap="previewImage(item,bannerList)">
							<view class="shop-img">
								<image :src="item" mode="aspectFill"></image>
							</view>
						</swiper-item>
					</swiper>
					<view class="shop-info">
						<view class="info-top">
							<view class="shop-name-box flexWrapNo">
								<view class="shop-name">{{storeInfo.shop_name}}</view>
								<view class="shop-status"
									:class="{'repair-status':storeInfo.store_status_data!='business'}">
									<block v-if="storeInfo.store_status_data=='business'">营业中</block>
									<block v-else-if="storeInfo.store_status_data=='rest'">休息中</block>
									<block v-else>维护中</block>
								</view>
							</view>
						</view>
						<view class="address-info">
							<text>{{storeInfo.location}}</text>
						</view>
					</view>
				</view>

				<!-- 功能分组tab -->
				<view class="group-tab">
					<view class="tab-item" :class="{active:currentTag==1}" @tap="tabChange(1)">店铺设置</view>
					<view class="tab-item" :class="{active:currentTag==2}" @tap="tabChange(2)">店铺经营</view>
					<view class="tab-item" :class="{active:currentTag==3}" @tap="tabChange(3)">会员营销</view>
					<!-- <view class="tab-item" :class="{active:currentTag==4}" @tap="tabChange(4)">微股东</view> -->
				</view>

				<view class="operation-box flexWrapNo">
					<block v-if="currentTag==1">
						<view class="operation-item flexWarpCenterColumn" @tap="goPage('/page-home/shopInfo')">
							<view class="operation-img">
								<image src="../../static/index/shop-icon.png"></image>
							</view>
							<view>店铺信息</view>
						</view>
						<view class="operation-item flexWarpCenterColumn" @tap="goPage('/moduleB/manage/tableSet')">
							<view class="operation-img">
								<image src="../../static/index/tableSet-icon.png"></image>
							</view>
							<view>台桌设置</view>
						</view>
						<view class="operation-item flexWarpCenterColumn" @tap="goPage('/moduleB/manage/priceSet')">
							<view class="operation-img">
								<image src="../../static/index/priceSet-icon.png"></image>
							</view>
							<view>定价设置</view>
						</view>
						<view class="operation-item flexWarpCenterColumn" @tap="goPage('/moduleB/manage/rechargeSet')">
							<view class="operation-img">
								<image src="../../static/index/rechargeSet-icon.png"></image>
							</view>
							<view>充值设置</view>
						</view>
						<view class="operation-item flexWarpCenterColumn"
							@tap="goPage('/moduleB/manage/meituanTiktok')">
							<view class="operation-img">
								<image src="../../static/index/meituanTiktok-icon.png"></image>
							</view>
							<view>美团抖音</view>
						</view>
						<view class="operation-item flexWarpCenterColumn" @tap="goPage('/moduleB/manage/function')">
							<view class="operation-img">
								<image src="../../static/index/function-icon.png"></image>
							</view>
							<view>功能区设置</view>
						</view>
						<view class="operation-item flexWarpCenterColumn" @tap="goSet()">
							<view class="operation-img">
								<image src="../../static/index/settle-icon.png"></image>
							</view>
							<view>结算账户</view>
						</view>
						<view class="operation-item flexWarpCenterColumn"
							@tap="goPage('/pages/manage/limitationSetting')">
							<view class="operation-img">
								<image src="../../static/index/appointmentSet-icon.png"></image>
							</view>
							<view>预约设置</view>
						</view>
						<!-- <view class="operation-item flexWarpCenterColumn"
							@tap="goPage('/moduleB/manage/teachingAssistantManage')">
							<view class="operation-img">
								<image src="../../static/index/assistant-icon.png"></image>
							</view>
							<view>助教管理</view>
						</view> -->
						<!-- <view class="operation-item flexWarpCenterColumn"
							@tap="goPage('/moduleB/manage/doorForbiddenManage')">
							<view class="operation-img">
								<image src="../../static/index/faceRecognition-icon.png"></image>
							</view>
							<view>门禁管理</view>
						</view> -->
						<view class="operation-item flexWarpCenterColumn" @tap="goPage('/moduleB/manage/clerkManage')">
							<view class="operation-img">
								<image src="../../static/index/clerkManage-icon.png"></image>
							</view>
							<view>店员管理</view>
						</view>
						<!-- <view class="operation-item flexWarpCenterColumn" @tap="jumpPage">
							<view class="operation-img">
								<image src="/static/index/storeInspection-icon.png"></image>
							</view>
							<view>门店巡检</view>
						</view> -->
					</block>

					<block v-if="currentTag==2">
						<view class="operation-item flexWarpCenterColumn" @tap="goPage('/pages/index/orderList')">
							<view class="operation-img">
								<image src="../../static/index/order-icon.png"></image>
							</view>
							<view>订单明细</view>
						</view>
						<view class="operation-item flexWarpCenterColumn" @tap="goTableManage()">
							<view class="operation-img">
								<image src="../../static/index/table-icon.png"></image>
							</view>
							<view>桌台管理</view>
						</view>
						<view class="operation-item flexWarpCenterColumn" @tap="goPage('/page-home/operatingData')">
							<view class="operation-img">
								<image src="../../static/index/operating-icon.png"></image>
							</view>
							<view>营业报表</view>
						</view>
						<view class="operation-item flexWarpCenterColumn"
							@tap="goPage('/pages/manage/calculationRecords')">
							<view class="operation-img">
								<image src="../../static/index/settlement-icon.png"></image>
							</view>
							<view>结算记录</view>
						</view>
						<!-- <view class="operation-item flexWarpCenterColumn" @tap="goPage('/pages/manage/tableList')">
							<view class="operation-img">
								<image src="../../static/index/payLater-icon.png"></image>
							</view>
							<view>先打后付</view>
						</view> -->
						<!-- <view class="operation-item flexWarpCenterColumn" @tap="goPage('/pages/manage/cleanManage')">
							<view class="operation-img">
								<image src="../../static/index/clean-icon.png"></image>
							</view>
							<view>保洁管理</view>
						</view> -->
						<view class="operation-item flexWarpCenterColumn" @tap="goPage('/pages/manage/plannedList')">
							<view class="operation-img">
								<image src="../../static/index/deduction-icon.png"></image>
							</view>
							<view>扣费明细</view>
						</view>
						<view class="operation-item flexWarpCenterColumn" @tap="goPage('/pages-smartbox/deviceSetup')">
							<view class="operation-img">
								<image src="../../static/index/smartbox-icon.png"></image>
							</view>
							<view>智能盒子</view>
						</view>
						<view class="operation-item flexWarpCenterColumn" @tap="goPage('/pages-hardware/smartAirConditioner')">
							<view class="operation-img">
								<image src="../../static/index/airConditioner-icon.png"></image>
							</view>
							<view>智能空调</view>
						</view>
						<!-- <view class="operation-item flexWarpCenterColumn" @tap="goPage('/pages/manage/openDoor')">
							<view class="operation-img">
								<image src="../../static/index/openDoor-icon.png"></image>
							</view>
							<view>开门</view>
						</view> -->
					</block>

					<block v-if="currentTag==3">
						<view class="operation-item flexWarpCenterColumn" @tap="goPage('/page-home/memberData')">
							<view class="operation-img">
								<image src="../../static/index/member-icon.png"></image>
							</view>
							<view>会员报表</view>
						</view>
						<view class="operation-item flexWarpCenterColumn" @tap="goPage('/pages/manage/memberSearch')">
							<view class="operation-img">
								<image src="../../static/index/membermanage-icon.png"></image>
							</view>
							<view>会员管理</view>
						</view>
						<view class="operation-item flexWarpCenterColumn" @tap="goPage('/pages/manage/couponList')">
							<view class="operation-img">
								<image src="../../static/index/coupon-icon.png"></image>
							</view>
							<view>优惠券</view>
						</view>
						<view class="operation-item flexWarpCenterColumn" @tap="goPage('/pages/manage/passCard')">
							<view class="operation-img">
								<image src="../../static/index/passCard-icon.png"></image>
							</view>
							<view>通卡优惠</view>
						</view>
						<view class="operation-item flexWarpCenterColumn" @tap="goPage('/moduleB/manage/newUseActive')">
							<view class="operation-img">
								<image src="../../static/index/newUseActive-icon.png"></image>
							</view>
							<view>活动赠券</view>
						</view>
						<view class="operation-item flexWarpCenterColumn" @tap="goPage('/pages/manage/taskList')">
							<view class="operation-img">
								<image src="../../static/index/task-icon.png"></image>
							</view>
							<view>任务挑战</view>
						</view>
						<!-- <view class="operation-item flexWarpCenterColumn grey" @tap="showTips()">
							<view class="operation-img">
								<image src="../../static/index/appointment-icon.png"></image>
							</view>
							<view>约球管理</view>
						</view> -->
						<!-- <view class="operation-item flexWarpCenterColumn" @tap="goPage('/moduleB/manage/returnList')"
							v-if="hasReturnMenu">
							<view class="operation-img">
								<image src="../../static/index/return-icon.png"></image>
							</view>
							<view>下单立返</view>
						</view> -->
						<!-- <view class="operation-item flexWarpCenterColumn"
							@tap="goPage('/moduleB/manage/collectBallWelfare')">
							<view class="operation-img">
								<image src="../../static/index/collect-ball.png"></image>
							</view>
							<view>集球福利</view>
						</view> -->
					</block>
					
					<block v-if="currentTag==4">
						<view class="operation-item flexWarpCenterColumn" @tap="goPage('/micro-shareholder/microShareholder')">
							<view class="operation-img">
								<image src="../../static/index/microShareholder-icon.png"></image>
							</view>
							<view>微股东</view>
						</view>
						<view class="operation-item flexWarpCenterColumn" @tap="goPage('/micro-shareholder/costManage')">
							<view class="operation-img">
								<image src="../../static/index/costManage-icon.png"></image>
							</view>
							<view>成本管理</view>
						</view>
						<view class="operation-item flexWarpCenterColumn" @tap="goPage('/micro-shareholder/shareBonusManage')">
							<view class="operation-img">
								<image src="../../static/index/bonusManage-icon.png"></image>
							</view>
							<view>分红管理</view>
						</view>
					</block>

					<!-- <view class="operation-item flexWarpCenterColumn" @tap="goPage('/pages/manage/control')">
						<view class="operation-img">
							<image src="../../static/index/control-icon.png"></image>
						</view>
						<view>设备控制</view>
					</view> -->

					<!-- <view class="operation-item flexWarpCenterColumn">
						<view class="operation-img">
							<image src="../../static/index/monitor.png"></image>
						</view>
						<view>监控</view>
					</view>
					
					<view class="operation-item flexWarpCenterColumn">
						<view class="operation-img">
							<image src="../../static/index/conditioner-icon.png"></image>
						</view>
						<view>空调</view>
					</view> -->

					<!-- <view class="operation-item flexWarpCenterColumn" @tap="goPage('/pages/manage/workOrder')">
						<view class="operation-img">
							<image src="../../static/index/passCard-icon.png"></image>
						</view>
						<view>工单</view>
					</view> -->
					<!--  @tap="goPage('/pages/manage/appointmentManagement')" -->
				</view>
			</view>
			<view class="empty-box" v-else>
				<image src="https://static.mo-yu.vip/uploads/20240910/ad9e7a334a68fba54a04b4d4de7c73b1.png"></image>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				pageOpc: 0,
				customHeight: {
					height: 30,
					top: 20
				},
				navigationBarHeight: "",
				navHeight: "",
				iStatusBarHeight: "",
				storeInfo: {},
				bannerList: [],
				is_set_settlement: 0,
				currentTag: 1,
				hasReturnMenu: false,
				identity: 1,
				roles:1,
				hardware_type:1
			};
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			//胶囊高度
			// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
			this.customHeight = wx.getMenuButtonBoundingClientRect()
			// 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
			this.navigationBarHeight = this.customHeight.height + (this.customHeight.top - this.iStatusBarHeight) * 2
			// 总体高度 = 状态栏高度 + 导航栏高度
			this.navHeight = this.navigationBarHeight + this.iStatusBarHeight
			//#endif
			
		},
		onReady() {
			setTimeout(() => {
				this.pageOpc = 1
			}, 100)
		},
		onShow() {
			this.identity=uni.getStorageSync('identity')
			this.roles=uni.getStorageSync('roles')
			// this.getHasMenu()
			this.getStoreInfo();
		},
		methods: {
			getStoreInfo() {
				this.$request.post(this.$api.storeInfo, {
					store_id: uni.getStorageSync('store_id')
				}, {
					token: true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code == 1) {
						this.storeInfo = data
						this.is_set_settlement = data.is_set_settlement
						this.bannerList = data.shop_cover_images?.split(',')
						this.hardware_type=data.hardware_type
						console.log(this.hardware_type)
					}
				})
			},
			goTableManage(){
				if(this.hardware_type==1){
					this.goPage('/pages/index/tableManage');
				}else{
					this.goPage('/pages/index/tableManageNew');
				}
			},
			// 判断此店铺是否有下单立返菜单
			getHasMenu() {
				this.$request.post(this.$api.hasMenu, {
					storeId: uni.getStorageSync('store_id')
				}, {
					isJava: true
				}).then(res => {
					if (res.code == 200) {
						this.hasReturnMenu = res.data
					}
				})
			},

			showTips() {
				this.$tools.showToast('此功能已暂时下架，改造完成后再见面哦！')
			},
			goSet() {
				this.goPage('/moduleB/manage/setSettle');
				
				// if (this.is_set_settlement == 1) {
				// 	this.$tools.showToast('该店铺已配置')
				// } else {
				// 	this.goPage('/moduleB/manage/setSettle');
				// }
			},

			tabChange(tag) {
				this.currentTag = tag
			},
			
			
			jumpPage(){
				console.log(this.roles)
				// 根据巡检员还是老板跳转不同页面
				if(this.roles==1){
					uni.navigateTo({
						url:'/shop-inspection/bossStoreInspection'
					})
				}else{	
					uni.navigateTo({
						url:'/shop-inspection/storeInspection'
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 28upx;
	}

	.banner-box {
		height: 380upx;

		.banner-item {
			height: 304upx;
			border-radius: 16upx;
			overflow: hidden;

			.shop-img {
				height: 100%;
			}
		}
	}

	.change-box {
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		width: 233upx;
		background: rgba(0, 0, 0, 0.06);
		border: 2px solid rgba(255, 255, 255, 0.251);
		border-radius: 63upx;
		justify-content: center;
		position: fixed;
		z-index: 999;

		.change-icon {
			width: 36upx;
			height: 36upx;
			margin-left: 24upx;
		}
	}

	.shop-box {
		.shop-info {
			margin-top: 28upx;

			.info-top {
				.shop-name-box {
					.shop-name {
						font-size: 36upx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 50upx;
						color: #FFFFFF;
					}

					.shop-status {
						font-size: 24upx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						width: 108upx;
						height: 44upx;
						line-height: 44upx;
						text-align: center;
						background: #2CA522;
						border-radius: 36upx;
						margin-left: 24upx;
					}

					.repair-status {
						background: #B7B7B7;
					}
				}
			}

			.address-info {
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 34upx;
				color: #666666;
				margin-top: 14upx;
			}
		}
	}

	// 管理分组tab
	.group-tab {
		margin-top: 54rpx;
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;

		.tab-item {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: rgba(255, 255, 255, 0.7);
			line-height: 38rpx;
		}

		.active {
			color: #FFFFFF;

			&::after {
				content: "";
				display: block;
				width: 100%;
				height: 4rpx;
				background: #26BCFD;
				margin-top: 8rpx;
			}
		}
	}

	.operation-box {
		margin-top: 40upx;
		flex-wrap: wrap;

		.operation-item {
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 34upx;
			color: #FFFFFF;
			margin-right: 40upx;
			margin-bottom: 56upx;
			border-radius: 10upx;
			&:nth-of-type(4n) {
				margin-right: 0;
			}

			.operation-img {
				width: 140upx;
				height: 140upx;
				margin-bottom: 16upx;
				border-radius: 20upx;
				overflow: hidden;
			}
		}

		.grey {
			opacity: .3;
		}
	}
</style>